<template>
<div class="home">
    <div class="home-body">
        <div class="app-flex-bet" @click="onJump('/login')">
            <div>
                <img src="@/assets/images/login/logo.png" alt="" class="home-logo">
                <span class="home-logo-name">Palmfun</span>
                
            </div>
            <div class="home-login"  v-if="!types.token">
                {{ $t("home.login") }}
            </div>
        </div>
        <div class="home-toast app-flex-bet"  @click="onJump('/notic')">
            <div class="home-toast-left">
                <img src="@/assets/images/home_toast.png" alt="" class="home-toast-img1">
                <div class="van-ellipsis">{{notice.noticeTitle}}</div>
            </div>
            <div class="home-toast-right">
                <img src="@/assets/images/right_icon.png" alt="" class="home-toast-img2">
            </div>
        </div>
        <van-swipe class="home-banner" :autoplay="3000"   indicator-color="white">
            <van-swipe-item v-for="(item) in bannerList" :key="item.id" @click="onLink(item)">
                <img :src="item.url" alt="">
            </van-swipe-item>
        </van-swipe>
        <div class="home-guid app-flex-bet">
            <div class="home-guid-list">
                <img src="@/assets/images/home_card.png" alt="">
                <div>{{ $t("home.chooseCard") }}</div>
            </div>
            <div class="home-guid-list">
                <img src="@/assets/images/home_upload.png" alt="">
                <div>{{ $t("home.upCard") }}</div>
            </div>
            <div class="home-guid-list">
                <img src="@/assets/images/home_wait.png" alt="">
                <div>{{ $t("home.waitCheck") }}</div>
            </div>
            <div class="home-guid-list">
                <img src="@/assets/images/home_pay.png" alt="">
                <div>{{ $t("home.pay") }}</div>
            </div>
        </div>

        <van-swipe class="home-hot" vertical :autoplay="3000" :show-indicators="false" v-if="offList.length">
            <van-swipe-item v-for="(item, index) in offList" :key="index">
                <div  class="app-flex-bet" style="height: 100%;align-items: center;">
                    <div class="home-user">
                        <img src="@/assets/images/home_hot.png" alt="">
                        <div>
                            {{$t('team.user')}}<span>{{item.nickName}}</span>{{ $t('home.suc') }}
                        </div>
                    </div>
                    <div class="home_num">
                        +{{ $t('moneyIcon') }}{{item.money}}
                    </div>
                </div>
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="swite-list">
        <div class="home-type">{{ $t('home.type') }}</div>
        <div class="home-cList">
            <div class="home-types" ref="swite">
                <template v-for="(item, index) in cardList" :key="index" >
                    <div class="home-li" :class="{'home-choose': types.chooseIndex == index }" @click="onChoose(index, item.id)" >
                        {{item.label}}
                    </div>
                </template>
                
            </div>
        </div>
        
    </div>

    <div class="home-card" v-for="(items, cIndex) in cardList" :key="items.id" :id="'id'+items.id">
        <div class="home-card-title">
            <div>
                <img :src="items.iconUrl" alt="">
            </div>
            <div>
                <div class="home-steam">{{items.label}}</div>
                <div class="home-rate">Rate: {{types.kinds[items.id].rate}}</div>
            </div>
        </div>
        
        <div class="app-flex-bet home-cont">
            <template span="8" v-for="(label, index) in items.labels" :key="label.id">
                <div class="home-mincard"  :class="{'home-chocard': label == types.labels[items.id] }" @click="onLabelChoose(items, label)">
                    <img :src="label.iconUrl" alt="" class="home-country">
                    <span>{{label.label}}</span>
                </div>
                
            </template>
        </div>

        <label>{{ $t("home.class") }}</label>
        <van-row v-if="types.labels[items.id]">
            <van-col span="8" 
                v-for="(la, laIndex) in types.labels[items.id].kinds" 
                :key="'la-' + laIndex" 
                >
                <div class="home-mincard" :class="{'home-chocard': types.cardType[items.id] == laIndex}" @click="onCardType(items.id, laIndex)">
                    {{ la.label }}
                </div>
            </van-col>
        </van-row>
        <label>{{ $t("home.recovery") }}</label>

        <div  class="home-table">
            <van-row class="home-hr">
                <van-col span="12" class="home-td">{{ $t("home.faceValue") }}</van-col>
                <van-col span="12" class="home-td">{{ $t("home.price") }}</van-col>
            </van-row>
            <van-row  class="home-hr" v-for="(obj, tIndex) in types.kinds[items.id].showPrcoveryPrice" :key="tIndex">
                <template v-for="(value, key) in obj" :key="key">
                    <van-col span="12" class="home-td" >{{key}}</van-col>
                    <van-col span="12" class="home-td">{{value}}</van-col>
                </template>
            </van-row>
            <!-- <van-row class="home-hr">
                <van-col span="12" class="home-td">≥ 100 </van-col>
                <van-col span="12" class="home-td">1美元 = ￥200</van-col>
            </van-row> -->
        </div>
        
        <div class="home-timer">
            <img src="@/assets/images/home_right.png" alt="">
            {{ $t("home.timeout") }}
        </div>
        <van-button type="primary" block color="#ED008C" @click="getIsReal(items.id, cIndex)">{{ $t("home.mysell") }}</van-button>
        
    </div>
    <br>
    <div class="home-foot">
        <img src="@/assets/images/clock.png" alt="">
        <span>
            {{ $t("home.timetext") }}
        </span>
    </div>
    <img src="@/assets/images/home_menu.png" alt="" class="home-menu" @click="onMenu">
    <PopupRight ref="PopupRightRef" class="home-p-right">
        <div>
            <div class="home-p-title app-border">{{ $t('home.type') }}</div>
            <template v-for="(item, index) in cardList" :key="item.id" >
                <van-cell  class="app-border" :border="false"  center :title="item.label" @click="onChoose(index, item.id, true)">
                    <template #icon>
                        <img :src="item.iconUrl" alt="" class="">
                    </template>
                </van-cell>
            </template>
            
        </div>
    </PopupRight>
    <Popup></Popup>
    <PopupCard></PopupCard>
    
</div>

</template>
<script setup>
import { reactive, ref } from "@vue/reactivity";
import Popup from "./components/Popup.vue";
import { getBanner, getNotice, getCardType, getOrderCardType, getWriteOffList } from "@/api/home.js";
import { getAuthInfo } from "@/api/card"
import { useRouter, useRoute } from "vue-router";
import PopupRight from "./components/PopupRight.vue"
import PopupCard from "./components/PopupCard.vue"
import { Toast } from "vant";
import { useI18n } from "vue-i18n";
import { onMounted, onActivated } from "@vue/runtime-core";
const swite = ref(null)
const router = useRouter()
const { t } = useI18n();

const types = reactive({
    token: "",
    chooseIndex: 0,
    labels: {}, // 国家选择
    cardType: {}, // 卡片类型选择
    kinds: {},
})

let PopupRightRef = ref(null)
function onMenu () {
    PopupRightRef.value.init()
}
const bannerList = ref([])


let notice = ref({})

const cardList = ref([])
async function getIsReal (id, index) {
    // let ret = await getAuthInfo()
    // // 状态：1未认证 2 认证中 3认证成功 4 认证失败
    // let status = ret?.data?.status || 1
    // if (status == 1 || status == 4) {
    //     router.push({
    //         path: "/identity"
    //     })
    // } else if (status == 2) {
    //     Toast(t("two.realMsg"))
    // } else if (status == 3) {
        onSell(id, index)
    // }
}
function onSell(id, index) {
    
    let { cnLabel } = types.labels[id]
    let { label } = types.kinds[id]
    console.log(types.cardType)
    let query = {
        
        label: cardList.value[index].label,
        gjLabel: types.labels[id].label,
        kLabel: label,
        type: types.cardType[id],
        kind: types.kinds[id]
    }
   
    
   
    router.push({
        path: "sellCard",
        query: {
            data: JSON.stringify(query)
        }
    })
    // onJump("/sellCard", query)
}

// 选择国家时触发
function onLabelChoose (item, data, cIndex = 0) {
    types.labels[item.id] = data
    onCardType(item.id, 0)
    
}
// 选择label
function onCardType (id, index) {
    let kinds = types.labels[id].kinds
    types.cardType[id] = index
    types.kinds[id] = kinds[index] || {}
}

// banner点击
function onLink(item) {
    console.log(item)
    if (!item.link) return
    window.location.href = item.link
}
function onChoose (index, id, showRight = false) {
    const dom = swite._rawValue.children[index]
    types.chooseIndex = index
    dom.scrollIntoView(true)
    onTypeClick(id)
    showRight && onMenu()
}
// 跳转登录
function onJump (path, query = {}) {
    router.push({
       path,
       query
    })
}
// 点击type
function onTypeClick (id) {
    id = '#id' + id
    let top = document.querySelector(id).offsetTop
    console.log(top)
    setTimeout(() => {
        document.querySelector('.action').scrollTop = top
    }, 80)
}

let offList = ref([])
// 获取用户核销列表
function onGetList () {
    getWriteOffList().then(res => {
        if (res.code != 200) return
        console.log(res)
        offList.value = res.data
    })
}
onMounted(() => {
    getNotice().then(res => {
        notice.value = res.data || {}
        console.log("通知", res)
    })
    onGetList()
    getCardType().then(res => {
        cardList.value = res.data
        res.data.map(v => {
            types.labels[v.id] = v.labels[0];
            types.cardType[v.id] = 0
            // console.log("这个是labels", labels)
            types.kinds[v.id] = v.labels[0]?.kinds[0] || {}

        })
    })
    getBanner().then(res => {
        console.log(res)
        bannerList.value = res.data
    })
})
onActivated(() => {
    console.log("进来执行了")
   
    types.token = sessionStorage.getItem("_token")
    
})

</script>
<style lang="less">

.home {
    background: #EFF2F4;
    color: #000;
    font-size: 12px;
    padding-bottom: 40px;
    &-steam {
        font-weight: bold;
        font-size: 13px;
    }
    &-p-title {
        font-size: 18px;
        text-align: center;
        padding: 20px;
    }
    &-p-right {
        font-weight: bold;
        padding: 0 20px;
        img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            vertical-align: middle;
        }
       
    }
    &-card-title {
        display: flex;
        align-items: center;
        img {
            width: 50px;
            margin-right: 10px;
        }
    }
    &-body {
        background: url('@/assets/images/home_bg.png') no-repeat;
        background-size: 100% auto;
        padding: 13px;
    }
    &-logo {
        height: 27px;
        vertical-align: middle;
        &-name {
            margin-left: 10px;
            color: #fff;
            margin-top: 3px;
        }
    }
    &-login {
        color: var(--primary);
        border-radius: 40px;
        padding: 0px 13px;
        background: #fff;
        font-size: 12px;
        height: 22px;
        line-height: 22px;
    }
    &-menu {
        width: 50px;
        position: fixed;
        bottom: 120px;
        right: 0;
    }
    &-toast {
        background: #fff;
        border-radius: 40px;
        height: 22px;
        line-height: 22px;
        margin-top: 5px;
        padding: 0 10px;
        align-items: center;
        font-size: 12px;
        &-img1 {
            height: 12px;
            margin-right: 3px;
            vertical-align: middle;
        }
        &-img2 {
            height: 13px;
            vertical-align: middle;
            width: 8px;
        }
        &-right {
            width: 13px;
            text-align: right;
        }
        &-left {
            flex: 1;
            overflow: hidden;
            display: flex;
            align-items: center;
            div {
                vertical-align: middle;
            }
        }
    }
    
    &-banner {
        margin-top: 10px;
        
        img {
            width: 100%;
            height: 122px;
            border-radius: 20px;
        }
    }
    &-guid {
        min-height: 50px;
        // align-items: center;
        background: #fff;
        background: #FFFFFF;
        box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.16);
        border-radius: 10px;
        padding: 0 20px;
        margin: 12px 0;
    }
    .home-guid-list {
        font-family: PingFang SC;
        // font-weight: bold;
        color: #ACACAC;
        position: relative;
        width: 50px;
        div {
            font-size: 12px;
            transform: scale(0.7);
        }
        text-align: center;
        img {
            margin-top: 5px;
            height: 23px;
        }
    }
    .home-guid-list + .home-guid-list::before {
        position: absolute;
        background: #ACACAC;
        height: 1px;
        content: " ";
        width: 40px;
        top: 20px;
        left: -80%;
    }
    &-user {
        span {
            color: #FB6B04;
        }
        display: flex;
        align-items: center;
    }
    &-hot {
        height: 37px;
        background: #FFFFFF;
        border: 1px solid #FA5400;
        box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.16);
        border-radius: 28px;
        padding: 0 11px;
        align-items: center;
        font-size: 12px;
        color: #000;
       
        img {
            height: 22px;
        }
    }
    &_num {
        width: 100px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FB6B04;
    }

    &-type {
        font-weight: bold;
        margin: 5px 0 11px;
        line-height: 1;
    }
    &-cont {
        flex-wrap: wrap;
        display: flex;
        justify-content: flex-start;
    }
    &-mincard {
        margin-right: 6px;
    }
    &-types {
        -webkit-overflow-scrolling: touch;
        display: flex;
        overflow: auto;
        white-space: nowrap;
    }
    &-li {
        color: #9A9A9B;
        border: 1px solid #9A9A9B;
        padding: 5px 20px;
        border-radius: 20px;
        margin-right: 10px;
        // min-width: 100px;
        font-size: 12px;
        text-align: center;
    }
    &-choose {
        color: var(--primary);
        border: 1px solid var(--primary);
    }
    label {
        font-weight: bold;
        font-size: 14px;
        margin-top: 15px;
        display: inline-block;
    }
    
    &-mincard {
        border: 1px solid #000000;
        border-radius: 8px;
        text-align: center;
        background: #fff;
        height: 30px;
        padding: 3px 10px;
        line-height: 30px;
        margin-top: 10px;
        min-width: 80px;
    }
    &-chocard {
        border: 2px solid var(--primary);
        color: var(--primary)
    }
    &-country {
        width: 30px;
        height: 18px;
        vertical-align: middle;
        margin-right: 10px;
        
    }
    &-table {
        margin-top: 20px;
        text-align: center;
        border-radius: 20px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
        border: 1px solid #333;
        
    }
    &-td {
        padding: 15px;   
    }
    &-td + &-td {
        border-left: 1px solid #333;
    }
    &-hr + &-hr {
        border-top: 1px solid #333;
    }
    &-timer {
        text-align: center;
        padding: 10px;
        img {
            width: 19px;
            vertical-align: middle;
            margin-right: 5px;
        }
    }
    &-foot {
        text-align: center;
        position: fixed;
        background: #FFD7EF;
        color: #FF5EBD;
        font-size: 14px;
        width: 100%;
        padding: 8px 0;
        // min-height: 32px;
        // line-height: 32px;
        bottom: 45px;
        img {
            width: 22px;
            vertical-align: middle;
            margin-right: 10px;
        }
        span {
            vertical-align: middle;
        }
    }
}
.swite-list {
    font-size: 12px;
    ::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }
    margin-left: 20px;
    margin-bottom: 20px;
}
.home-card {
    padding: 13px 10px;
    margin: 14px;
    border-radius: 10px;
    background: #fff;
}
</style>